<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>28_定位-特殊情况3-垂直居中</title>
        <style>
            #outer {
                position: relative;
                width: 800px;
                height: 600px;
                border: 1px solid black;
            }

            #inner {
                position: absolute;
                left: 50%;
                top: 50%;

                margin-left: -100px;
                margin-top: -100px;

                width: 200px;
                height: 200px;
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner"></div>
        </div>
    </body>
</html>